<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

// 考试统计指标
const examStats = ref({
  todayExams: 5,
  ungradedPapers: 12,
  avgScore: 78.5,
  totalStudents: 243
});

// 成绩分布数据
const scoreDistribution = ref([
  { name: '优秀 (90+)', value: 15, color: '#00B42A' },
  { name: '良好 (75-89)', value: 30, color: '#FF7D00' },
  { name: '及格 (60-74)', value: 40, color: '#F7BA1E' },
  { name: '不及格 (<60)', value: 15, color: '#F53F3F' }
]);

// 图表引用
const questionTypeChart = ref(null);
const examTrendChart = ref(null);
const classScoreChart = ref(null);

// 图表实例
let chartInstances = [];

// 题目类型分布配置
const questionTypeOptions = ref({
  tooltip: { trigger: 'item' },
  legend: { orient: 'horizontal', bottom: 0 },
  series: [{
    name: '题型分布',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: { borderRadius: 10 },
    label: { show: false },
    emphasis: {
      label: { show: true, fontSize: 14 }
    },
    data: [
      { value: 45, name: '单选题' },
      { value: 30, name: '多选题' },
      { value: 15, name: '填空题' },
      { value: 10, name: '主观题' }
    ]
  }]
});

// 考试趋势配置
const examTrendOptions = ref({
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    data: ['04/01', '04/02', '04/03', '04/04', '04/05', '04/06', '今日']
  },
  yAxis: { type: 'value' },
  series: [{
    name: '考试数量',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { width: 3 },
    areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(58, 77, 233, 0.8)' },
        { offset: 1, color: 'rgba(58, 77, 233, 0.1)' }
      ]) },
    data: [3, 5, 7, 6, 4, 8, 5]
  }]
});

// 班级平均分配置
const classScoreOptions = ref({
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    data: ['高一(1)班', '高一(2)班', '高一(3)班', '高一(4)班', '高一(5)班']
  },
  yAxis: {
    type: 'value',
    name: '平均分',
    max: 100
  },
  series: [{
    name: '平均分',
    type: 'bar',
    barWidth: '60%',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#3a4de9' },
        { offset: 1, color: '#6a79f1' }
      ])
    },
    data: [82, 75, 90, 78, 85]
  }]
});

// 初始化图表
const initChart = (chartRef, options) => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  chart.setOption(options.value);
  chartInstances.push(chart);
  return chart;
};

// 响应式调整
const handleResize = () => {
  chartInstances.forEach(chart => chart.resize());
};

onMounted(() => {
  // 初始化所有图表
  initChart(questionTypeChart, questionTypeOptions);
  initChart(examTrendChart, examTrendOptions);
  initChart(classScoreChart, classScoreOptions);

  window.setTimeout(() => {
    handleResize()
  },100)

  // 添加窗口大小监听
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('resize', handleResize);

  // 销毁所有图表实例
  chartInstances.forEach(chart => chart.dispose());
  chartInstances = [];
});
</script>

<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <a-grid :cols="24" :col-gap="12" :row-gap="12">
      <a-grid-item :span="6">
        <a-card title="今日考试" hoverable class="stat-card">
          <a-statistic :value="examStats.todayExams" suffix="场" />
          <template #extra>
            <div class="trend up">↑12%</div>
          </template>
        </a-card>
      </a-grid-item>

      <a-grid-item :span="6">
        <a-card title="待批改试卷" hoverable class="stat-card">
          <a-statistic :value="examStats.ungradedPapers" :value-style="{ color: '#F53F3F' }" />
          <template #extra>
            <a-link>立即批改</a-link>
          </template>
        </a-card>
      </a-grid-item>

      <a-grid-item :span="6">
        <a-card title="平均成绩" hoverable class="stat-card">
          <a-statistic
              :value="examStats.avgScore"
              :precision="1"
              suffix="分"
          />
        </a-card>
      </a-grid-item>

      <a-grid-item :span="6">
        <a-card title="参考学生" hoverable class="stat-card">
          <a-statistic
              :value="examStats.totalStudents"
              suffix="人"
          />
        </a-card>
      </a-grid-item>
    </a-grid>

    <!-- 图表区域 - 第一行 -->
    <a-grid :cols="24" class="chart-section" :col-gap="12" :row-gap="12">
      <!-- 成绩分布 -->
      <a-grid-item :span="12">
        <a-card title="成绩分布" hoverable>
          <div class="score-distribution">
            <div v-for="item in scoreDistribution" :key="item.name" class="distribution-item">
              <div class="label">{{ item.name }}</div>
              <div class="progress-container">
                <a-progress
                    :percent="item.value"
                    :color="item.color"
                    :animation="true"
                    class="custom-progress"
                />
                <span class="progress-value">{{ item.value }}%</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-grid-item>

      <!-- 题目类型分布 -->
      <a-grid-item :span="12">
        <a-card title="题目类型分布" hoverable>
          <div ref="questionTypeChart" style="height: 300px"></div>
        </a-card>
      </a-grid-item>
    </a-grid>

    <!-- 图表区域 - 第二行 -->
    <a-grid :cols="24" class="chart-section" :col-gap="12" :row-gap="12">
      <!-- 考试趋势 -->
      <a-grid-item :span="12">
        <a-card title="最近7天考试趋势" hoverable>
          <div ref="examTrendChart" style="height: 300px"></div>
        </a-card>
      </a-grid-item>

      <!-- 班级平均分 -->
      <a-grid-item :span="12">
        <a-card title="班级平均分对比" hoverable>
          <div ref="classScoreChart" style="height: 300px"></div>
        </a-card>
      </a-grid-item>
    </a-grid>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f6f7;
}

.chart-section {
  margin-top: 20px;
}

.stat-card {
  border-radius: 8px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.score-distribution {
  padding: 10px 0;
}

.distribution-item {
  margin: 20px 0;
}

.label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #1d2129;
}

.progress-container {
  display: flex;
  align-items: center;
}

.custom-progress {
  flex: 1;
  margin-right: 12px;
}

.progress-value {
  font-weight: 600;
  color: #86909c;
  min-width: 40px;
  text-align: right;
}

.trend {
  font-size: 12px;
  font-weight: 500;
}

.trend.up {
  color: #00b42a;
}

.trend.down {
  color: #f53f3f;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .chart-section {
    margin-top: 10px;
  }

  .a-grid-item {
    min-width: 100%;
    flex: 0 0 100%;
  }
}
</style>